<template>
  <div>
    <div style="display: flex">
      <div style="flex: 1" v-if="state.goods.imgs">
        <img :src="activeImg" alt="" style="width: 100%; height: 300px">

        <div style="display: flex;">
          <img @mouseover="changeImg(item.url)" style="width: 100px; height: 100px; margin-right: 5px;" :class="{ 'activeImg': item.url === activeImg }"
               :src="item.url" alt="" v-for="item in state.goods.imgs" :key="item.url">
        </div>
      </div>

      <div style="padding-left: 20px; flex: 2;">
        <el-card style=" color: #666">
          <div style="font-size: 20px; font-weight: 500; color: #000">{{ state.goods.name }}</div>
          <div style="margin: 10px 0; font-size: 13px;">{{ state.goods.descr }}</div>

          <div  style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4"><div class="text">价格</div></el-col>
              <el-col :span="20" style="color: red; font-size: 18px; line-height: 22px">￥ {{ state.goods.price }}</el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20" >
              <el-col :span="4"><div class="text">库存</div></el-col>
              <el-col :span="20">{{ state.goods.store }}</el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20" >
              <el-col :span="4"><div class="text">增值服务</div></el-col>
              <el-col :span="20"><span style="color: dodgerblue; font-size: 13px"><el-icon style="top: 2px"><Refresh /></el-icon>  免费上门，免费送货，免费物流</span></el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20" >
              <el-col :span="4"><div class="text">物流服务</div></el-col>
              <el-col :span="20"><span style=" font-size: 13px"><el-icon style="top: 2px"><MessageBox /></el-icon>  由 京东 发货, 并提供售后服务. 今日21:00前下单，预计明日({{  }}日)送达</span></el-col>
            </el-row>
          </div>


          <div style="margin: 10px 0">
            <el-row :gutter="20" >
              <el-col :span="4"><div class="text">重量</div></el-col>
              <el-col :span="20"><span style=" font-size: 13px"><el-icon style="top: 2px"><Cellphone /></el-icon> 不计重量</span></el-col>
            </el-row>
          </div>

          <div style="margin: 20px 0; display: flex">
            <div style="width: 120px">
              <el-input-number v-model="num" :min="1" :max="10" size="large" style="width: 120px"/>
            </div>

            <div style="flex: 1; padding-left: 10px">
              <el-button size="large" style="background-color: orangered; color: white" @click="addCart">加入购物车</el-button>
            </div>
          </div>

          <div style="margin: 10px; font-size: 12px">
            温馨提示 ·支持7天无理由退货
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
  import request from "@/utils/request";
  import { useRoute } from 'vue-router'
  import {reactive, ref} from "vue";
  import {ElMessage} from "element-plus";

  const route = useRoute()
  const id = route.query.id
  const num = ref(1)
  const activeImg = ref('')
  const state = reactive({
    goods: {}
  })
  const load = () => {
    request.get('/goods/' + id).then(res => {
      state.goods = res.data

      activeImg.value = state.goods.imgs[0].url
    })
  }
  load()

  const changeImg = (url) => {
    activeImg.value = url
  }

  const addCart = () => {
    // 添加购物车
    request.post('/cart', { goodsId: state.goods.id,  num: num.value}).then(res => {
      if (res.code === '200') {
        ElMessage.success('添加成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

</script>

<style>
.text {
  width: 100%;
  display: inline-block;
  text-align-last: justify;
}
.activeImg {
  border: 1px solid red;
}
</style>